import { Outlet, NavLink } from "react-router-dom";
const Layout = () => {
    return (
        <>
            <div className='page-header'>
                <h1>
                    路由器定义<small>路由器定义</small>
                </h1>
            </div>
            <div className='page-content'>
                <div className='wrapper wrapper1'>
                    <div className='btn-group' style={{ marginBottom: 20 }}>
                        <NavLink
                            to='/'
                            className={({ isActive }) =>
                                isActive ? "btn btn-danger" : "btn btn-primary"
                            }
                        >
                            HOME
                        </NavLink>
                        <NavLink
                            to='/navigate'
                            className={({ isActive }) =>
                                isActive ? "btn btn-danger" : "btn btn-primary"
                            }
                        >
                            NAVIGATE
                        </NavLink>
                        <NavLink
                            to='/about'
                            className={({ isActive }) =>
                                isActive ? "btn btn-danger" : "btn btn-primary"
                            }
                        >
                            ABOUT
                        </NavLink>
                        <NavLink
                            to='/notfound'
                            className={({ isActive }) =>
                                isActive ? "btn btn-danger" : "btn btn-primary"
                            }
                        >
                            NOT FOUND
                        </NavLink>
                    </div>
                    <Outlet />
                </div>
            </div>
        </>
    );
};

export default Layout;
